<script setup lang="ts">
import type { themeConfigState } from '@/types/stores/theme'
import javascript from 'highlight.js/lib/languages/javascript'
import { local } from '@/utils/storage'
import { themesStore } from '@/stores/modules/theme'
import { storeToRefs } from 'pinia'
import { handler } from '@/utils'
import { getThemeConfirg } from '@/common/theme'
import { NConfigProvider, darkTheme, zhCN, dateZhCN } from 'naive-ui'
import hljs from 'highlight.js/lib/core'

hljs.registerLanguage('javascript', javascript)
const theme = themesStore()
const { setConfirmTheme } = theme
const { getThemeOverrides: themeOverrides, getIsDark: isDark } = storeToRefs(theme)
const themeInfo = computed(() => {
  return isDark.value ? darkTheme : undefined
})
const setVarCss = (info, name = '--yang') => {
  for (const infoKey in info) {
    if (!['animation', 'isClose'].includes(infoKey)) {
      const cssName = name + `-${handler(infoKey)}`
      if (typeof info[infoKey] === 'string') {
        document.documentElement.style.setProperty(cssName, info[infoKey])
      } else {
        setVarCss(info[infoKey], cssName)
      }
    }
  }
}

onMounted(() => {
  const info = local.get('themeConfig')
  if (info) {
    setConfirmTheme(info)
    document.documentElement.style.cssText = local.get('themeConfigStyle')!
  } else {
    const theme = getThemeConfirg('default')
    setConfirmTheme(theme as themeConfigState)
    setVarCss(theme)
  }
})
</script>

<template>
  <NConfigProvider
    abstract
    :theme="themeInfo"
    :themeOverrides="themeOverrides"
    :locale="zhCN"
    :date-locale="dateZhCN"
    :hljs="hljs"
  >
    <n-loading-bar-provider>
      <router-view />
    </n-loading-bar-provider>
  </NConfigProvider>
</template>

<style scoped></style>
